<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="卡包id">
        <el-input v-model="queryParams.id" placeholder="请输入卡包id" />
      </el-form-item>
      <!-- card_type_display_name -->
      <el-form-item label="卡包分组">
        <!-- <el-input v-model="queryParams.cardTypeDisplayName" placeholder="请输入卡包分组" /> -->
        <el-select v-model="queryParams.cardTypeDisplayName" placeholder="请选择卡包分组" clearable>
          <el-option label="宝可梦 日文" value="宝可梦 日文" />
          <el-option label="宝可梦 英文" value="宝可梦 英文" />
          <el-option label="宝可梦 简中" value="宝可梦 简中" />
          <el-option label="宝可梦 繁中" value="宝可梦 繁中" />
        </el-select>
      </el-form-item>
      <el-form-item label="卡盒显示名称">
        <el-input v-model="queryParams.displayName" placeholder="请输入卡盒显示名称" />
      </el-form-item>
      <el-form-item label="卡盒类型">
        <el-select v-model="queryParams.boxType" placeholder="请选择卡盒类型" clearable>
          <el-option label="扩充包" value="扩充包" />
          <el-option label="预组" value="预组" />
          <el-option label="推广卡" value="推广卡" />
        </el-select>
      </el-form-item>

      <el-form-item label="世代/系列">
        <el-input v-model="queryParams.generation" placeholder="请输入世代/系列" />
      </el-form-item>
      <el-form-item>
        <div style="display: flex; gap: 10px;">
          <el-button type="primary" @click="getTujianList">查询</el-button>
          <el-button type="reset" @click="resetQuery">重置</el-button>
          <el-upload accept=".xlsx" :headers="headers" :action="uploadFileUrl" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <el-button size="small" type="primary">导入卡包excel</el-button>
          </el-upload>
          <el-upload ref="uploadFileFolderRefData" :headers="headers" :auto-upload="false"
            :on-change="handleFileChangeData" :multiple="true" :action="uploadFileCardDataUrl" :show-file-list="false"
            :on-success="handleAvatarSuccessCardData">
            <el-button size="small" type="primary">上传卡片图片数据</el-button>
          </el-upload>
          <el-button :loading="folderLoading" type="success" @click="handleUploadFolderFilesData"
            :disabled="!filesData.length">
            开始上传
            <span v-if="filesData.length">{{ filesData.length }}</span>
          </el-button>
          <!-- 导入文件夹图片 -->
          <el-upload ref="uploadFileFolderRef" :multiple="true" :auto-upload="false" :on-change="handleFileChange"
            :headers="headers" :show-file-list="false">
            <el-button size="small" type="primary">上传卡包图片数据</el-button>
          </el-upload>
          <el-button :loading="folderLoading" type="success" @click="handleUploadFolderFiles" :disabled="!files.length">
            开始上传
            <span v-if="files.length">{{ files.length }}</span>
          </el-button>
        </div>

      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tujianList" border height="60vh">
      <el-table-column label="卡盒封面图片" align="center" width="100">
        <template slot-scope="scope">
          <el-image style="width: 80px; height: 80px" :src="scope.row.imageUrl || scope.row.image"
            :preview-src-list="[scope.row.imageUrl || scope.row.image]" fit="cover">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="卡包id" align="center" prop="id" :show-overflow-tooltip="true" />
      <el-table-column width="200px" label="卡盒显示名称" align="center" prop="displayName" :show-overflow-tooltip="true" />
      <el-table-column width="100px" label="卡盒类型" align="center" prop="boxType" />
      <el-table-column width="200px" label="卡盒名称" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column width="200px" label="卡盒编号" align="center" prop="number" />
      <el-table-column width="200px" label="世代/系列" align="center" prop="generation" :show-overflow-tooltip="true" />
      <el-table-column width="100px" label="卡盒价格" align="center" prop="price" />
      <el-table-column width="200px" label="卡牌类型显示名称" align="center" prop="cardTypeDisplayName"
        :show-overflow-tooltip="true" />
      <el-table-column width="200px" label="卡牌类型原始名称" align="center" prop="cardTypeName"
        :show-overflow-tooltip="true" />
      <el-table-column width="100px" label="卡牌语言" align="center" prop="cardTypeLanguage" />
      <el-table-column width="100px" label="卡牌总数" align="center" prop="cardCount" />

      <el-table-column label="发售日期" align="center" prop="saleData" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.saleData) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog :title="'编辑卡盒'" :visible.sync="editDialogVisible" width="800px" append-to-body>
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="卡盒显示名称" prop="displayName">
              <el-input v-model="editForm.displayName" placeholder="请输入卡盒显示名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡盒类型" prop="boxType">
              <el-select v-model="editForm.boxType" placeholder="请选择卡盒类型">
                <el-option label="扩充包" value="扩充包" />
                <el-option label="预组" value="预组" />
                <el-option label="推广卡" value="推广卡" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡盒名称" prop="name">
              <el-input v-model="editForm.name" placeholder="请输入卡盒名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡盒编号" prop="number">
              <el-input v-model="editForm.number" placeholder="请输入卡盒编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="世代/系列" prop="generation">
              <el-input v-model="editForm.generation" placeholder="请输入世代/系列" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡盒价格" prop="price">
              <el-input v-model="editForm.price" placeholder="请输入卡盒价格" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发售日期" prop="saleData">
              <el-date-picker v-model="editForm.saleData" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡牌类型显示名称" prop="cardTypeDisplayName">
              <el-select v-model="editForm.cardTypeDisplayName" placeholder="请选择卡包分组" style="width: 100%">
                <el-option label="宝可梦 日文" value="宝可梦 日文" />
                <el-option label="宝可梦 英文" value="宝可梦 英文" />
                <el-option label="宝可梦 简中" value="宝可梦 简中" />
                <el-option label="宝可梦 繁中" value="宝可梦 繁中" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡牌类型原始名称" prop="cardTypeName">
              <el-input v-model="editForm.cardTypeName" placeholder="请输入卡牌类型原始名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡牌语言" prop="cardTypeLanguage">
              <el-input v-model="editForm.cardTypeLanguage" placeholder="请输入卡牌语言" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡牌总数" prop="cardCount">
              <el-input v-model="editForm.cardCount" placeholder="请输入卡牌总数" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getTujianList" />
  </div>
</template>

<script>
import { getTujianList, importFolder, importFolderData, importFolderAdd } from '@/api/system/tujian';
import { parseTime } from '@/utils/ruoyi';
import Pagination from '@/components/Pagination';

import { getToken } from "@/utils/auth";

export default {
  components: { Pagination },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/card/tuijianBoxs/import", // 上传文件服务器地址
      uploadFileUrlfolder: process.env.VUE_APP_BASE_API + "/card/tuijianBoxs/import/folder", // 上传文件服务器地址
      // 遮罩层
      loading: false,
      uploadFileCardDataUrl: process.env.VUE_APP_BASE_API + "/import/folder", // 上传文件服务器地址
      // 卡盒列表数据
      tujianList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 编辑对话框显示状态
      editDialogVisible: false,
      // 编辑表单数据
      editForm: {
        id: undefined,
        displayName: '',
        boxType: '',
        name: '',
        number: '',
        generation: '',
        price: '',
        saleData: '',
        cardTypeDisplayName: '',
        cardTypeName: '',
        cardTypeLanguage: '',
        cardCount: ''
      },
      // 表单校验规则
      rules: {
        displayName: [{ required: true, message: '请输入卡盒显示名称', trigger: 'blur' }],
        boxType: [{ required: true, message: '请选择卡盒类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入卡盒名称', trigger: 'blur' }],
        number: [{ required: true, message: '请输入卡盒编号', trigger: 'blur' }],
        generation: [{ required: true, message: '请输入世代/系列', trigger: 'blur' }],
        price: [{ required: true, message: '请输入卡盒价格', trigger: 'blur' }],
        saleData: [{ required: true, message: '请选择发售日期', trigger: 'change' }],
        cardTypeDisplayName: [{ required: true, message: '请选择卡牌类型显示名称', trigger: 'change' }],
        cardTypeName: [{ required: true, message: '请输入卡牌类型原始名称', trigger: 'blur' }],
        cardTypeLanguage: [{ required: true, message: '请输入卡牌语言', trigger: 'blur' }],
        cardCount: [{ required: true, message: '请输入卡牌总数', trigger: 'blur' }]
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 上传的文件列表
      files: [],
      filesData: [],
      folderLoading: false,
    }
  },
  mounted() {
    this.getTujianList();
    this.$refs.uploadFileFolderRef.$children[0].$refs.input.webkitdirectory = true
    this.$refs.uploadFileFolderRefData.$children[0].$refs.input.webkitdirectory = true
  },
  methods: {
    handleFileChangeData(file, fileList) {
      // 将文件信息添加到files数组
      this.filesData = fileList.map(file => ({
        name: file.name,
        size: file.size,
        type: file.raw.type || '文件夹',
        modifiedDate: file.raw.lastModified,
        raw: file.raw
      }));
    },
    handleUploadFolderFilesData() {
      this.folderLoading = true;
      console.log(this.filesData);
      const formData = new FormData();
      this.filesData.forEach(file => {
        formData.append('files', file.raw);
      });
      importFolderData(formData).then(res => {
        console.log(res);
        this.$modal.msgSuccess(res.msg);
        this.filesData = [];
        this.folderLoading = false;
        this.$refs.uploadFileFolderRefData.clearFiles();
      }).catch(() => {
        this.folderLoading = false;
        this.$refs.uploadFileFolderRefData.clearFiles();
      })
    },
    // 导入文件夹图片
    handleFileChange(file, fileList) {
      // 将文件信息添加到files数组
      this.files = fileList.map(file => ({
        name: file.name,
        size: file.size,
        type: file.raw.type || '文件夹',
        modifiedDate: file.raw.lastModified,
        raw: file.raw
      }));
    },
    // 上传文件夹图片
    handleUploadFolderFiles() {
      this.folderLoading = true;
      console.log(this.files);
      const formData = new FormData();
      this.files.forEach(file => {
        formData.append('files', file.raw);
      });
      importFolder(formData).then(res => {
        console.log(res);
        this.$modal.msgSuccess(res.msg);
        this.files = [];
        this.folderLoading = false;
        this.$refs.uploadFileFolderRef.clearFiles();
      }).catch(() => {
        this.folderLoading = false;
        this.$refs.uploadFileFolderRef.clearFiles();
      })
    },
    /** 查询卡盒列表 */
    getTujianList() {
      this.loading = true;
      getTujianList(this.queryParams).then(res => {
        this.tujianList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /** 时间格式化 */
    parseTime,
    resetQuery() {
      this.queryParams = {
        id: '',
        cardTypeDisplayName: '',
        displayName: '',
        boxType: '',
        generation: '',
        pageNum: 1,
        pageSize: 10,
      };
      this.getTujianList();
    },
    handleAvatarSuccess(res, file) {
      if (res.code === 200) {
        this.$modal.msgSuccess("导入成功");
        this.getTujianList();
      } else {
        this.$modal.msgError("导入失败");
      }
    },
    handleAvatarSuccessCardData(res, file) {
      if (res.code === 200) {
        this.$modal.msgSuccess("导入成功");
        this.getTujianList();
      } else {
        this.$modal.msgError("导入失败");
      }
    },
    // 打开编辑对话框
    handleEdit(row) {
      this.editForm = {
        id: row.id,
        displayName: row.displayName,
        boxType: row.boxType,
        name: row.name,
        number: row.number,
        generation: row.generation,
        price: row.price,
        saleData: row.saleData,
        cardTypeDisplayName: row.cardTypeDisplayName,
        cardTypeName: row.cardTypeName,
        cardTypeLanguage: row.cardTypeLanguage,
        cardCount: row.cardCount
      };
      this.editDialogVisible = true;
    },
    // 提交编辑
    submitEdit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          importFolderAdd(this.editForm).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess('修改成功');
              this.editDialogVisible = false;
              this.getTujianList();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        }
      });
    },
  }
};
</script>



<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}
</style>
